<template>
    <div>
      <!-- el-select 用于选择一个节点 -->
      <el-select v-model="selectedNode" placeholder="请选择代理查看" @change="onNodeChange">
        <el-option
          v-for="node in treeData"
          :key="node.id"
          :label="node.label"
          :value="node.id"
        />
      </el-select>
      <!-- el-tree 用于显示树状结构 -->
      <el-tree
        :data="treeData"
        :props="treeProps"
        accordion
        node-key="id"
        default-expand-all
        v-model:current-node="selectedNode"
        @node-click="onNodeClick"
      />
    </div>
  </template>
  
  <script>
  import { defineComponent, ref } from 'vue';
  import { ElSelect, ElOption, ElTree } from 'element-plus';
  
  export default defineComponent({
    name: 'TreeSelectComponent',
    components: {
      ElSelect,
      ElOption,
      ElTree,
    },
    props: {
      // 父组件传入的树数据
      treeData: {
        type: Array,
        required: true,
      },
    },
    setup() {
      // 选择的节点
      const selectedNode = ref(null);
  
      // 树组件的属性配置
      const treeProps = {
        label: 'label',
        children: 'children',
      };
  
      // 当树节点被点击时触发
      const onNodeClick = (node) => {
        console.log('树节点被点击：', node);
        selectedNode.value = node.id;
      };
  
      // 当选择框变化时触发
      const onNodeChange = (value) => {
        console.log('选择框选中节点 ID:', value);
      };
  
      return {
        selectedNode,
        treeProps,
        onNodeClick,
        onNodeChange,
      };
    },
  });
  </script>
  
  <style scoped>
  /* 根据需要添加样式 */
  </style>
  